<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片居中</title>
	<style>
		html,body {
			height: 100%;
		}
		li {line-height: 160px;}
		.wp {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
		.demo{
			border:1px #ddd solid;
			/*width:508px;*/
			/*height:548px;*/
			width: 100%;
			height: 100%;
			overflow:hidden;
			text-align:center;
			display:table;
			float:left;
			/*margin:100px auto;*/
			position:relative;
			overflow:hidden;
		}
		.demo a{
			display:table-cell;
			vertical-align:middle;
/*			width:200px;
			height:343px;*/
		}
		.demo a img{
			border:1px #ddd solid;
			margin:0 auto;
			max-width:200px;
			max-height:140px;
		}
	</style>
</head>
<body>
	<ul>
		<li>jksafjo1</li>
		<li>jksafjo2</li>
		<li>jksafjo3</li>

	</ul>
	<div class="wp">
		<div class= 'demo'><a href='#'><img src='img/xigua.jpg' /></a></div>
		<div class= 'demo'><a href='#'><img src='img/xigua.jpg' /></a></div>
		<div class= 'demo'><a href='#'><img src='img/xigua.jpg' /></a></div>
	</div>
	<input type="button" value="点击">

	<script>
		
	
	// var n;
	// function aa() {
	// 	n =1 ;
	// 	var timer = setInterval(function() {
	// 		n++;
	// 		console.log(23);
	// 		if(n==100) {clearInterval(timer);return n;}

	// 	},10);
			
	// }
	// console.log(aa())
	</script>
</body>
</html>